import 'package:date_format/date_format.dart';
import 'package:flutter/material.dart';
import 'package:flutter_cupertino_datetime_picker/flutter_cupertino_datetime_picker.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:nyh_motorcade_app/styles/colors.dart';
import 'package:nyh_motorcade_app/widgets/custom_app_bar.dart';
import 'package:nyh_motorcade_app/widgets/text_button_with_icon.dart';
import 'select_date_controller.dart';

class SelectDatePage extends StatelessWidget {
  final controller = Get.put(SelectDateController());

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colours.color_background,
      appBar: CustomAppBar(context: context, title: "自定义时间"),
      body: Column(
        children: [
          SizedBox(
            height: 12.w,
          ),
          Container(
            color: Colours.color_white,
            padding: EdgeInsets.only(left: 16.w, right: 10.w),
            height: 48.w,
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Text(
                  "开始时间",
                  style: TextStyle(
                    color: Colours.color_text_theme,
                    fontSize: 14.sp,
                  ),
                ),
                GetBuilder<SelectDateController>(
                  builder: (controller) {
                    return TextButtonWithIcon(
                      onPressed: () {
                        showDatePickerDialog(1);
                      },
                      icon: Image.asset(
                        "images/ic_arrow_right_gray.png",
                        color: Colours.color_text_theme,
                      ),
                      label: Text(
                        controller.startDate.isNotEmpty ? controller.startDate : "请选择",
                        style: TextStyle(
                          color: Colours.color_text_theme,
                          fontSize: 14.sp,
                        ),
                      ),
                      textIconPadding: 8.w,
                      iconTextAlignment: IconTextAlignment.iconRightTextLeft,
                    );
                  },
                ),
              ],
            ),
          ),
          Container(
            color: Colours.color_white,
            padding: EdgeInsets.only(left: 16.w, right: 10.w),
            height: 48.w,
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Text(
                  "结束时间",
                  style: TextStyle(
                    color: Colours.color_text_theme,
                    fontSize: 14.sp,
                  ),
                ),
                GetBuilder<SelectDateController>(
                  builder: (controller) {
                    return TextButtonWithIcon(
                      onPressed: () {
                        showDatePickerDialog(2);
                      },
                      icon: Image.asset(
                        "images/ic_arrow_right_gray.png",
                        color: Colours.color_text_theme,
                      ),
                      label: Text(
                        controller.endDate.isNotEmpty ? controller.endDate : "请选择",
                        style: TextStyle(
                          color: Colours.color_text_theme,
                          fontSize: 14.sp,
                        ),
                      ),
                      textIconPadding: 8.w,
                      iconTextAlignment: IconTextAlignment.iconRightTextLeft,
                    );
                  },
                ),
              ],
            ),
          ),
          Expanded(child: Container()),
          Container(
            padding: EdgeInsets.symmetric(vertical: 8.w, horizontal: 16.w),
            color: Colours.color_white,
            child: GetBuilder<SelectDateController>(
              builder: (controller) {
                return TextButton(
                  onPressed: () {
                    controller.onConfirm();
                  },
                  child: Text(
                    "确定",
                    style: TextStyle(
                      color: Colours.color_white,
                      fontSize: 16.sp,
                    ),
                  ),
                  style: ButtonStyle(
                    backgroundColor: MaterialStateProperty.resolveWith((states) {
                      return (controller.startDate.isNotEmpty && controller.endDate.isNotEmpty) ? Colours.color_theme : Colours.color_ffd599;
                    }),
                    overlayColor: MaterialStateProperty.resolveWith((states) {
                      return (controller.startDate.isNotEmpty && controller.endDate.isNotEmpty) ? Colours.color_theme_deep : Colours.color_ffd599;
                    }),
                    shape: MaterialStateProperty.all(
                      RoundedRectangleBorder(
                        borderRadius: BorderRadius.circular(28.w),
                      ),
                    ),
                    minimumSize: MaterialStateProperty.all(Size(double.infinity, 48.w)),
                  ),
                );
              },
            ),
          ),
        ],
      ),
    );
  }

  void showDatePickerDialog(int type) {
    DatePicker.showDatePicker(
      Get.context!,
      locale: DateTimePickerLocale.zh_cn,
      onMonthChangeStartWithFirstDate: true,
      pickerTheme: DateTimePickerTheme(
        cancelTextStyle: TextStyle(color: Colours.color_text_theme, fontSize: 14.sp),
        confirmTextStyle: TextStyle(color: Colours.color_text_theme, fontSize: 14.sp),
        itemTextStyle: TextStyle(color: Colours.color_text_theme, fontSize: 16.sp),
        titleHeight: 48.w,
        pickerHeight: 200.w,
        itemHeight: 40.w,
      ),
      dateFormat: "yyyy年-MM月-dd日",
      minDateTime: DateTime.parse("2021-01-01 00:00:00"),
      maxDateTime: DateTime.parse("2023-01-01 00:00:00"),
      onConfirm: (DateTime dateTime, List<int> selectedIndex) {
        String date = formatDate(dateTime, ["yyyy", "-", "mm", "-", "dd"]);
        if (type == 1) {
          controller.setStartDate(date);
        } else {
          controller.setEdnDate(date);
        }
      },
    );
  }
}
